<template>
  <div class="category-detail">
    <header class="category-header">
      <div class="container">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ category?.name || '分类详情' }}</el-breadcrumb-item>
        </el-breadcrumb>
        <h1 class="category-title">
          <i :class="category?.icon"></i>
          {{ category?.name }}
        </h1>
        <p class="category-description">{{ category?.desc }}</p>
      </div>
    </header>

    <main class="container">
      <section class="courses-section" v-if="categoryCourses.length">
        <h2 class="section-title">相关课程</h2>
        <el-row :gutter="20">
          <el-col 
            :xs="24" 
            :sm="12" 
            :md="8" 
            v-for="course in categoryCourses" 
            :key="course.id"
          >
            <el-card shadow="hover" class="course-card">
              <div class="course-image-wrapper">
                <img 
                  :src="course.image" 
                  :alt="course.title" 
                  class="course-image"
                >
                <div class="course-tag" v-if="course.tag">{{ course.tag }}</div>
              </div>
              <div class="course-info">
                <h3>{{ course.title }}</h3>
                <div class="price">¥{{ course.price }}
                  <span class="original-price" v-if="course.originalPrice">¥{{ course.originalPrice }}</span>
                </div>
                <div class="meta">
                  <span><i class="el-icon-user"></i> {{ course.students }}</span>
                  <span><i class="el-icon-star-off"></i> {{ course.rating }}</span>
                </div>
                <AddToCart :product="course" />
              </div>
            </el-card>
          </el-col>
        </el-row>
      </section>

      <section class="empty-state" v-else>
        <el-empty description="暂无相关课程"></el-empty>
      </section>
    </main>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import AddToCart from '../components/AddToCart.vue';

const route = useRoute();

// 模拟分类数据
const categories = [
  { id: 1, name: '编程开发', desc: '学习最新编程技术', icon: 'el-icon-cpu' },
  { id: 2, name: '设计创意', desc: '提升设计能力', icon: 'el-icon-brush' },
  { id: 3, name: '营销推广', desc: '掌握营销技巧', icon: 'el-icon-data-line' },
  { id: 4, name: '职场技能', desc: '提升职场竞争力', icon: 'el-icon-office-building' },
  { id: 5, name: '语言学习', desc: '掌握多国语言', icon: 'el-icon-chat-line-round' },
  { id: 6, name: '考试认证', desc: '获取专业认证', icon: 'el-icon-document' }
];

// 模拟课程数据
const courses = [
  {
    id: 1,
    categoryId: 1,
    title: 'Vue 3 实战开发',
    image: 'https://picsum.photos/400/300?random=4',
    price: 299,
    originalPrice: 599,
    tag: '限时优惠',
    students: '1254人学习',
    rating: '4.9'
  },
  {
    id: 2,
    categoryId: 1,
    title: 'React 高级课程',
    image: 'https://picsum.photos/400/300?random=5',
    price: 399,
    students: '986人学习',
    rating: '4.8'
  },
  {
    id: 3,
    categoryId: 2,
    title: 'UI设计基础',
    image: 'https://picsum.photos/400/300?random=6',
    price: 199,
    students: '2156人学习',
    rating: '4.7'
  }
];

// 根据路由参数获取分类信息
const category = computed(() => {
  const categoryId = parseInt(route.params.id);
  return categories.find(c => c.id === categoryId);
});

// 获取当前分类的课程
const categoryCourses = computed(() => {
  const categoryId = parseInt(route.params.id);
  return courses.filter(course => course.categoryId === categoryId);
});
</script>

<style scoped>
.category-detail {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.category-header {
  background-color: #fff;
  padding: 30px 0;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.el-breadcrumb {
  margin-bottom: 20px;
}

.category-title {
  font-size: 2rem;
  color: #303133;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.category-title i {
  font-size: 2rem;
  color: #409EFF;
}

.category-description {
  color: #606266;
  font-size: 1.1rem;
}

.section-title {
  font-size: 1.5rem;
  margin-bottom: 30px;
  color: #303133;
}

.course-card {
  height: 100%;
  margin-bottom: 20px;
  overflow: hidden;
  transition: all 0.3s;
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.course-image-wrapper {
  position: relative;
  overflow: hidden;
}

.course-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s;
}

.course-card:hover .course-image {
  transform: scale(1.05);
}

.course-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #F56C6C;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
}

.course-info {
  padding: 15px;
}

.course-info h3 {
  margin-bottom: 10px;
  color: #303133;
  font-size: 16px;
  height: 44px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.price {
  color: #F56C6C;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.original-price {
  color: #909399;
  font-size: 14px;
  text-decoration: line-through;
  margin-left: 5px;
}

.meta {
  display: flex;
  justify-content: space-between;
  color: #909399;
  font-size: 12px;
  margin-bottom: 15px;
}

.enroll-btn {
  width: 100%;
}

.empty-state {
  padding: 40px 0;
  background-color: #fff;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .category-header {
    padding: 20px 0;
  }

  .category-title {
    font-size: 1.5rem;
  }

  .category-title i {
    font-size: 1.5rem;
  }

  .category-description {
    font-size: 1rem;
  }

  .section-title {
    font-size: 1.2rem;
  }
}
</style>